<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">发送</button>
    <button class="create">创建</button>
    <button class="fasong">发送1</button>
  </body>
  <!-- 通过 CDN 引入 Socket.IO 客户端库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.js"></script>
  <script>
    // 创建 Socket.IO 连接
    const socket = io("http://localhost:3030");

    // 监听连接成功事件
    socket.on("connect", () => {
      console.log("链接成功");
    });
    socket.on("join-room", (data) => {
      console.log(data);
    });
    socket.on("chat-message", (data) => {
      console.log(data);
    });
    document.querySelector(".btn").addEventListener("click", (e) => {
      socket.emit("message", 123);
    });
    document.querySelector(".create").addEventListener("click", (e) => {
      socket.emit("create_room", "123");
    });
    document.querySelector(".fasong").addEventListener("click", (e) => {
      socket.emit("send-message", "你好");
    });
  </script>
</html>
